.baseRisk {
  position: absolute;
  background-color: #ffffff;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0px 2px 8px 0px rgba(179, 179, 179, 0.4);
  padding: 1rem;
}

// 选择类别
.baseRisk.selectedCategory {
  color: #ffffff;
  background-color: #0e7cdc;
}

// 非健康生存风险
.baseRisk.notFiveHealthHabitRisk {
  width: 42vw;
  height: 16vh;
}

// 健康生存风险
.baseRisk.fiveHealthHabitRisk {
  box-sizing: border-box;
  position: static;
  display: table;
  width: 90%;
  height: 87px;
  // min-width: 580px;
  margin: 20px auto 0px auto;
}
// cerebral: 大脑的 Stroke: 脑卒中
.cerebralStrokeRisk {
  bottom: 60vh;
  right: 16px;
}
// cardiac: 心脏的 Infarction: 梗塞
.cardiacInfarctionRisk {
  bottom: 36vh;
  left: 16px;
}
// gastric: 胃 Cancer: 癌症
.gastricCancerRisk {
  bottom: 16vh;
  right: 16px;
}
// colorectal: 结直肠
.colorectalCancerRisk {
  bottom: 10vh;
  left: 16px;
}

.report {
  font-size: 1rem;
  width: 100%;
  z-index: 1;
}

.report-human {
  position: relative;
  width: 100vw;
  height: 80vh;
  margin: 0 auto;
  background-image: url(./images/imgHuman.png);
  background-size: 60vw auto;
  background-position: 79px bottom;
  background-repeat: no-repeat;
  z-index: 1;
}

.colorectalIllust {
  position: absolute;
  width: 158px;
  height: 158px;
  bottom: 62px;
  left: 232px;
  z-index: 10;
}
.tablet-colorectalIllust {
  display: none;
}

.longRiskTitle {
  box-sizing: border-box;
  display: table-cell;
  width: 65%;
  padding-right: 5%;
  vertical-align: middle;
  text-align: right;
}

.longRiskLevel {
  box-sizing: border-box;
  display: table-cell;
  width: 35%;
  vertical-align: middle;
  text-align: left;
}

.shortRisk {
  text-align: center;
}
.shortRisk .riskTitle {
  text-indent: -13%;
  margin-bottom: 18px;
}

/*************************************************************************************************
 * タブレット・デスクトップ向け
 *************************************************************************************************/
@media screen and (min-width:641px) {
  .report-human {
    position: relative;
    width: 100vh;
    /* タブレット用画像の高さに調整 (6pxはタブレット用画像の頭の余白分) */
    height: 690px;    /* 809px - (783px - 670px) + 6px */
    margin: 0 auto;
    background-image: url(./images/t_imgHuman.png);
    background-size: 448px 670px;
    background-position: 79px bottom;
  }

  .cerebralStrokeRisk {
    bottom: 504px;
    left: 374px;
  }

  .cardiacInfarctionRisk {
    bottom: 334px;
    left: 16px;
  }

  .gastricCancerRisk {
    bottom: 180px;
    left: 374px;
  }

  .colorectalCancerRisk {
    bottom: 21px;
    left: 16px;
  }

  .tablet-colorectalIllust {
    position: absolute;
    display: block;
    bottom: 0px;
    left: 221px;
    z-index: 10;
  }
  .colorectalIllust {
    display: none;
  }

  .report {
    font-size: 25px;
  }
}
